import { ProFormSelect } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useMemo } from 'react';
import * as flags from '@/services/flags';

type FormProps = {
  open: boolean;
  current: API.Geoip | undefined;
  onCancel: () => void;
  onSubmit: (values: API.Geoip) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, current, onCancel, onSubmit } = props;
  if (!open) {
    return null;
  }



  return (
    <DrawerForm<API.Geoip>
      open={open}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}IP地区分组`}
      width={900}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        name="flag"
        label="国家/地区"
        options={flags.FlagOptions}
        fieldProps={{
          showSearch: true,
          optionItemRender(item: any) {
            return (
              <>
                <img
                  alt=""
                  style={{
                    // background: '#f0f0f0',
                    width: '24px',
                    height: '24px',
                    marginRight: '6px',
                    marginTop: '-9px',
                    marginBottom: '-5px',
                  }}
                  src={`/images/flagoptions/${item.value}.png`}
                />
                {item.label}
              </>
            );
          },
        }}
        rules={[{ required: true, message: '请选择国家/地区' }]}
      />
      
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormTextArea name="remark" label="备注" />
    </DrawerForm>
  );
};

export default Form;
